<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--  This is a multi purpose file used for:
        1. as a stand alone example of the Lightbox 
        2. as the RSF template for the image gallery tool 
      Note that the RSF ids throughout this template are used by the gallery tool and are only necessary when using RSF.-->
      
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:rsf="http://ponder.org.uk/rsf">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fluid Image Reorderer</title>
    <link href="../../../framework/fss/css/fss-reset.css" type="text/css" rel="stylesheet" media="all" />
    <link href="../css/Reorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
    <link href="../css/ImageReorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
    
    <!--  Required javascript modules for the Image Reorderer which can be replaced with the build generated file Fluid-all.js -->
    <script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.core.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.draggable.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../../framework/core/js/Fluid.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../../framework/core/js/FluidDOMUtilities.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../reorderer/js/GeometricManager.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../reorderer/js/Reorderer.js" rsf:id="scr=contribute-script"></script>
    <script type="text/javascript" src="../../reorderer/js/ImageReorderer.js" rsf:id="scr=contribute-script"></script>
    
    <!--  Ensure jQuery plays nice with other toolkits - must be called after all the javascript is loaded. --> 
    <script type="text/javascript" rsf:id="scr=contribute-script">
      jQuery.noConflict();
    </script> 
  </head>
  <body>
    <p id="para1">This is the Image Reorderer demo page.</p>

    <!--  
      The Lightbox uses hidden inputs as the strategy for posting the item order back 
      to the server, therefore the orderables need to be enclosed in a form.
    -->
    <form id="reorder-form">

      <!-- lightbox-parent is used for testing setup and teardown -->
      <div rsf:id="lightbox:" id="lightbox-parent" >
        <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" class="fl-reorderer-image-container" tabindex="2">
         
          <!--  
            Orderable items are divs denoted by ids in the following form.
            [lightbox-container-id] + lightbox-cell: + [index] + :  
            The createLightboxFromId() function expects this format when attaching the javascript behaviour of the Lightbox. 
          -->
          <div rsf:id="lightbox-cell:" id="gallery:::gallery-thumbs:::lightbox-cell:0:">
        
            <div rsf:id="lightbox-client-cell:">
            
              <!--  The RSF gallery contains the markup for this inner div in another template. -->
              <div class="fl-reorderer-image-inner-container">
              
                <a id="focus-element1" href="../images/Dragonfruit.jpg">
                  <img id="fluid.img.first" src="../images/Dragonfruit.jpg" alt="Dragonfruit"/>
                </a>
              </div>
              <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
                <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>
              </div>
            </div>
          
            <!--  
              This input is used for posting the new order back to the server.
              The value is the index of the thumbnail in a virtual array of thumbnails.
              That is, 'value="0"' denotes the 0'th thumbnail; 'value="1"' the 1st,
              and so on.
            -->
            <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>
          </div>
    
          <!--  The remainder of the lightbox cells are used for the stand alone lightbox and the tests, not the RSF gallery -->
          <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:1:">
            <div>
              <div class="fl-reorderer-image-inner-container">
                <a href="../images/Kiwano.jpg" >
                  <img id="fluid.img.second" src="../images/Kiwano.jpg" alt="Kiwano"/>
                </a>
              </div>
              <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
                <a href="../images/Kiwano.jpg" >Kiwano</a>
              </div>
            </div>
            <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/>      
          </div>
              
          <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:2:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Blackberry.jpg" >
		              <img id="fluid.img.3" src="../images/Blackberry.jpg" alt="Blackberry"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Blackberry.jpg" >Blackberry</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:3:">
	          <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Cherry.jpg">
		              <img id="fluid.img.4" src="../images/Cherry.jpg" alt="Cherry"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Cherry.jpg" >Cherry</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:4:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Fig.jpg">
		              <img id="fluid.img.5" src="../images/Fig.jpg" alt="Fig"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Fig.jpg" >Fig</a>
		          </div>
		        </div>
	          <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/>        
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:5:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Grapes.jpg">
		              <img id="fluid.img.6" src="../images/Grapes.jpg" alt="Grapes"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Grapes.jpg" >Grapes</a>
		          </div>
		        </div>
	          <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:6:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Kiwi.jpg" >
		              <img id="fluid.img.7" src="../images/Kiwi.jpg" alt="Kiwi"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Kiwi.jpg" >Kiwi</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:7:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Kumquat.jpg">
		              <img id="fluid.img.8" src="../images/Kumquat.jpg" alt="Kumquat"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Kumquat.jpg" >Kumquat</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:8:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Lemon.jpg">
		              <img id="fluid.img.9" src="../images/Lemon.jpg" alt="Lemon"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Lemon.jpg" >Lemon</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:9:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Orange.jpg">
		              <img id="fluid.img.10" src="../images/Orange.jpg" alt="Orange"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Orange.jpg" >Orange</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:10:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/RedApple.jpg">
		              <img id="fluid.img.11" src="../images/RedApple.jpg" alt="RedApple"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/RedApple.jpg" >RedApple</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:11:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Tamarillo.jpg">
		              <img id="fluid.img.12" src="../images/Tamarillo.jpg" alt="Tamarillo"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Tamarillo.jpg" >Tamarillo</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:12:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Mangosteen.jpg">
		              <img id="fluid.img.secondLast" src="../images/Mangosteen.jpg" alt="Mangosteen"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Mangosteen.jpg" >Mangosteen</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>
		      </div>
      
		      <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:13:">
		        <div>
		          <div class="fl-reorderer-image-inner-container">
		            <a href="../images/Banana.jpg">
		              <img id="fluid.img.last" src="../images/Banana.jpg" alt="Banana"/>
		            </a>
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <a href="../images/Banana.jpg" >Banana</a>
		          </div>
		        </div>
		        <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>
		      </div>
		    </div>
        
        <!--  Attach the javascript functionality to the markup by using createLightboxFromId() -->
        <script type="text/javascript"  rsf:id="init-script">
          fluid.reorderImages("[id='gallery:::gallery-thumbs:::']");
        </script>
      </div>
      
      <!-- Sample instruction message. In the RSF gallery, this is supplied by the server. -->
      <div class="fl-reorderer-instructions">
        <div class="fl-reorderer-screen-reader-instructions" tabindex="1">Image Reorderer: To use the keyboard:
                  Screen reader users turn off virtual cursor (insert + z).
                  Select an image using i, k, m or j.
                  Move an image using CTRL + i, k, m or j.
                  View an image by pressing Enter.</div>
        <div class="fl-reorderer-downarrow"></div>
        <div tabindex="-1">
          To use the keyboard:<br/>
            Select an image using i, k, m or j, or the arrow keys.<br/>
            View an image by pressing Enter.<br/>
            Move an image using CTRL + a direction key. 
        </div>
      </div>
    </form>
  </body>
</html>
